<template>
  <div class="main-container">
    <div class="header flex-between-center">
      <div class="left-logo flex-between-center">
        <img src="@/assets/logo.svg" alt="" />
        <h1 class="logo-title text-4xl font-bold">Trello</h1>
      </div>
      <div class="right-btn flex-between-center">
        <span :class="!currentBtn ? 'current-btn' : ''" @click="changeMode"
          >登 录</span
        >
        <span :class="!currentBtn ? '' : 'current-btn'" @click="changeMode"
          >注 册</span
        >
      </div>
    </div>
    <div
      class="login-container"
      :style="!currentBtn ? 'height: 320px;' : 'height: 280px;'"
    >
      <h1 class="text-lg font-bold text-4xl text-center mt-4">Trello</h1>
      <LoginForm :currentBtn="currentBtn" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import LoginForm from "@/components/LoginForm.vue";

const currentBtn = ref(false);
// 切换模式
const changeMode = () => {
  currentBtn.value = !currentBtn.value;
};
</script>

<style lang="less" scoped>
.main-container {
  width: 100vw;
  min-height: 100vh;
  background-color: #2465ff;

  .header {
    height: 100px;
    width: 1400px;
    margin: 0 auto;

    .left-logo {
      width: 180px;

      img {
        height: 60px;
      }

      .logo-title {
        color: white;
      }
    }

    .right-btn {
      width: 280px;

      span {
        font-size: 18px;
        color: white;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        padding: 10px 40px;
      }
    }
  }

  .login-container {
    width: 360px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background: white;
  }
}

.current-btn {
  background: #3770ff;
}
</style>
